<template>
    <RouterView />

    <van-tabbar v-model="active">
        <van-tabbar-item v-for="(tabbar, idx) in tabbars" :key="idx" :icon="tabbar.meta.icon"
            @click="tabbarClick(idx, tabbar.path)">{{ tabbar.meta.name
            }}</van-tabbar-item>
    </van-tabbar>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()

const active = ref(0);
const tabbars = reactive(router.options.routes[0]['children'])

onMounted(() => {
    active.value = tabbars.findIndex((item) => "/" + item.path == route.path)
})

const tabbarClick = (idx, path) => {
    active.value = idx
    router.push(path)
}
</script>

<style lang="less" scoped></style>
